<template>
  <div class="history-records-container">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>种母历史记录</span>
          <el-button type="primary" @click="handleAdd">新增记录</el-button>
        </div>
      </template>

      <!-- 搜索表单 -->
      <el-form :model="searchForm" inline class="search-form">
        <el-form-item label="种母耳号">
          <el-input v-model="searchForm.EarNumbers" placeholder="请输入种母耳号" clearable />
        </el-form-item>
        <el-form-item label="配种日期">
          <el-date-picker
            v-model="searchForm.MatingDate"
            type="date"
            placeholder="请选择配种日期"
            clearable
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">搜索</el-button>
          <el-button @click="handleReset">重置</el-button>
        </el-form-item>
      </el-form>

      <!-- 数据表格 -->
      <el-table :data="historyRecordsList" border stripe style="width: 100%">
        <el-table-column prop="HistoryRecordsId" label="记录ID" width="80" />
        <el-table-column prop="EarNumbers" label="种母耳号" width="120" />
        <el-table-column prop="EarNumber" label="种公耳号" width="120" />
        <el-table-column prop="MatingDate" label="配种日期" width="120">
          <template #default="scope">
            {{ formatDate(scope.row.MatingDate) }}
          </template>
        </el-table-column>
        <el-table-column prop="PregnancyDate" label="妊娠日期" width="120">
          <template #default="scope">
            {{ formatDate(scope.row.PregnancyDate) }}
          </template>
        </el-table-column>
        <el-table-column prop="PregnancyResult" label="妊娠结果" width="100" />
        <el-table-column prop="LambingDate" label="分娩日期" width="120">
          <template #default="scope">
            {{ formatDate(scope.row.LambingDate) }}
          </template>
        </el-table-column>
        <el-table-column prop="HealthyLambCount" label="健羔数" width="80" />
        <el-table-column prop="WeakLambCount" label="弱羔数" width="80" />
        <el-table-column prop="DeadLambCount" label="死羔数" width="80" />
        <el-table-column prop="WeaningDate" label="断奶日期" width="120">
          <template #default="scope">
            {{ formatDate(scope.row.WeaningDate) }}
          </template>
        </el-table-column>
        <el-table-column prop="WeaningLambCount" label="断奶只数" width="100" />
        <el-table-column prop="WeaningTotalWeight" label="断奶总重量(kg)" width="120" />
        <el-table-column prop="WeaningAvgWeight" label="断奶平均重量(kg)" width="140" />
        <el-table-column prop="House_name" label="栋舍名称" width="120" />
        <el-table-column prop="Field_Name" label="栏位名称" width="120" />
        <el-table-column prop="Parity" label="胎次" width="80" />
        <el-table-column prop="ResponsiblePerson" label="负责人" width="100" />
        <el-table-column prop="CreateTime" label="创建时间" width="160">
          <template #default="scope">
            {{ formatDateTime(scope.row.CreateTime) }}
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="pagination-container">
        <el-pagination
          v-model:current-page="pagination.PageIndex"
          v-model:page-size="pagination.PageSize"
          :page-sizes="[10, 20, 50, 100]"
          :total="pagination.TotalCount"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Sheep_BreedingRead } from '@/utils/Interceptors'
import { formatDate, formatDateTime } from '@/utils/dateUtils'
import { useRouter } from 'vue-router'
const router = useRouter()
// 响应式数据
const historyRecordsList = ref<any[]>([])
const searchForm = reactive({
  EarNumbers: '',
  MatingDate: null as Date | null
})

const pagination = reactive({
  PageIndex: 1,
  PageSize: 20,
  TotalCount: 0
})

// 获取历史记录列表
const getHistoryRecordsList = async () => {
  try {
    const params = {
      ...searchForm,
      PageIndex: pagination.PageIndex,
      PageSize: pagination.PageSize
    }

    const res = await Sheep_BreedingRead.get('/api/HistoryRecord/GetList', { params })
    
    if (res.data && res.data.code === 200) {
      historyRecordsList.value = res.data.data.PageData || []
      pagination.TotalCount = res.data.data.TotalCount || 0
      pagination.PageIndex = res.data.data.PageIndex || 1
      pagination.PageSize = res.data.data.PageSize || 20
    } else {
      ElMessage.error(res.data?.msg || '获取数据失败')
    }
  } catch (error: any) {
    console.error('获取历史记录列表失败:', error)
    ElMessage.error('获取数据失败，请稍后重试')
  }
}

// 搜索
const handleSearch = () => {
  pagination.PageIndex = 1
  getHistoryRecordsList()
}

// 重置
const handleReset = () => {
  searchForm.EarNumbers = ''
  searchForm.MatingDate = null
  pagination.PageIndex = 1
  getHistoryRecordsList()
}

// 分页大小改变
const handleSizeChange = (size: number) => {
  pagination.PageSize = size
  pagination.PageIndex = 1
  getHistoryRecordsList()
}

// 当前页改变
const handleCurrentChange = (page: number) => {
  pagination.PageIndex = page
  getHistoryRecordsList()
}

// 新增记录
const handleAdd = () => {
  router.push('/HistoryRecordsAdd')
}

// 编辑记录
const handleEdit = (row: any) => {
  ElMessage.info('编辑功能待实现')
}

// 删除记录
const handleDelete = async (row: any) => {
  try {
    await ElMessageBox.confirm('确定要删除这条记录吗？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })
    
    ElMessage.info('删除功能待实现')
  } catch {
    // 用户取消删除
  }
}

// 页面加载时获取数据
onMounted(() => {
  getHistoryRecordsList()
})
</script>

<style scoped>
.history-records-container {
  padding: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.search-form {
  margin-bottom: 20px;
}

.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}
</style> 